<template>
  <q-page class="q-pa-sm" style="min-height: 100%">
    <div class="row">
      <div>{{ currentUser.username }}</div>
      <q-space></q-space>
      <q-btn dense flat icon="mdi-menu" padding="none" size="12px">
        <q-menu class="shadow-5" content-class="bg-black text-white">
          <q-list dense style="min-width: 168px;font-size:12px">
            <div class="row">
              <q-space />
              <div
                style="font-size:9px;line-height: 12px"
              >{{ currentUser.username }}</div>
            </div>
            <q-separator />
            <q-item clickable v-close-popup>
              <q-item-section
                avatar
                style="min-width: 24px;padding-right:6px!important"
              >
                <q-icon name="mdi-upload" size="18px"></q-icon>
              </q-item-section>
              <q-item-section>Upload</q-item-section>
            </q-item>
            <q-item clickable v-close-popup>
              <q-item-section
                avatar
                style="min-width: 24px;padding-right:6px!important"
              >
                <q-icon name="mdi-view-compact" size="18px"></q-icon>
              </q-item-section>
              <q-item-section>Layout</q-item-section>
            </q-item>
            <q-separator />
            <q-item clickable v-close-popup>
              <q-item-section
                avatar
                style="min-width: 20px;padding-right:6px!important"
              >
                <q-icon name="mdi-account" size="18px"></q-icon>
              </q-item-section>
              <q-item-section>User Info</q-item-section>
            </q-item>
            <q-item clickable v-close-popup>
              <q-item-section
                avatar
                style="min-width: 20px;padding-right:6px!important"
              >
                <q-icon name="mdi-application" size="18px"></q-icon>
              </q-item-section>
              <q-item-section>Panels</q-item-section>
            </q-item>
            <q-item clickable v-close-popup>
              <q-item-section
                avatar
                style="min-width: 20px;padding-right:6px!important"
              >
                <q-icon name="mdi-account-cog" size="18px"></q-icon>
              </q-item-section>
              <q-item-section>Account Settings</q-item-section>
            </q-item>
            <q-separator />
            <q-item clickable v-close-popup>
              <q-item-section
                avatar
                style="min-width: 20px;padding-right:6px!important"
              >
                <q-icon name="mdi-bug" size="18px"></q-icon>
              </q-item-section>
              <q-item-section>Feedback/Bug Report</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </q-btn>
    </div>
    <div
      class="banner row justify-between items-end q-pa-sm no-wrap"
      :style="`background-image:url('${currentUser.banner}')`"
    >
      <div class="col">
        <div class="row no-wrap">
          <q-avatar size="50px" round>
            <q-img :src="currentUser.avatar" />
            <q-badge floating outline style="margin-top: 40px;border:none">
              <q-avatar round size="12px" color="black">
                <q-icon
                  :name="currentStatus.icon"
                  :color="currentStatus.color"
                  size="10px"
                />
              </q-avatar>
            </q-badge>
          </q-avatar>
          <div class="column items-start">
            <div class="col username q-ml-xs text-no-wrap">bleed</div>
            <q-btn-dropdown
              flat
              dense
              no-caps
              :ripple="false"
              padding="xs"
              :color="currentStatus.color"
              :label="currentStatus.name"
            >
              <q-list
                dense
                style="font-size:12px;padding:0px;width:136px"
                class="bg-black text-white"
              >
                <q-item
                  clickable
                  v-close-popup
                  style="padding:0px"
                  v-for="status in userStatus"
                  :key="status.name"
                  @click="changeUserStatus(status)"
                >
                  <q-item-section avatar style="min-with:0px;padding:0px">
                    <q-avatar
                      size="32px"
                      :text-color="status.color"
                      :icon="status.icon"
                    />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>{{ status.name }}</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>
          </div>
        </div>
      </div>
      <div class="col-3">
        <div class="column justify-end items-end">
          <q-btn
            class="q-mb-sm"
            style="width: 83px"
            dense
            color="black"
            icon="mdi-account-plus"
            label="Follow"
            size="9px"
            align="left"
            no-caps
          />
          <q-btn
            style="width: 83px"
            dense
            color="black"
            icon="mdi-mail"
            label="Message"
            size="9px"
            align="left"
            no-caps
          />
        </div>
      </div>
    </div>
    <div class="row justify-start q-py-xs">
      <q-btn
        class="q-mx-sm"
        dense
        flat
        icon="mdi-alert-circle-outline"
        text-color="secondary"
      />
      <q-btn dense flat icon="mdi-image" text-color="info" />
    </div>
    <div>
      <q-toolbar style="padding:0px;margin:0px;min-height:20px">
        <q-tabs
          v-model="selectedProfileTab"
          dense
          align="left"
          class="text-secondary bg-blue-grey-8"
        >
          <q-tab name="about" label="about" />
          <q-tab name="experience" label="experience" />
          <q-tab name="contact" label="contact" />
        </q-tabs>
        <q-space />
        <q-btn
          dense
          flat
          icon="mdi-dots-vertical"
          size="12px"
          text-color="secondary"
        />
      </q-toolbar>
      <q-tab-panels
        v-model="selectedProfileTab"
        style="padding:0px"
        animated
        light
      >
        <q-tab-panel name="about" style="padding:0px">
          <about-panel />
        </q-tab-panel>
        <q-tab-panel name="experience" style="padding:0px">
          <experience-panel />
        </q-tab-panel>
        <q-tab-panel name="contact" style="padding:0px">
          <contact-panel />
        </q-tab-panel>
      </q-tab-panels>
    </div>
    <div class="q-my-sm">
      <q-toolbar style="padding:0px;margin:0px;min-height:20px">
        <q-tabs
          v-model="selectedGalleryTab"
          dense
          align="left"
          class="text-info bg-blue-grey-8"
        >
          <q-tab name="portfolio" label="portfolio" />
          <q-tab name="sketches" label="sketches" />
        </q-tabs>
        <q-space />
        <q-btn
          dense
          flat
          icon="mdi-dots-vertical"
          size="12px"
          text-color="info"
        />
      </q-toolbar>
      <q-tab-panels v-model="selectedGalleryTab" style="padding:0px" animated>
        <q-tab-panel name="portfolio" style="padding:0px">
          <gallery-panel />
        </q-tab-panel>
        <q-tab-panel name="sketches" style="padding:0px">
          <gallery-panel />
        </q-tab-panel>
      </q-tab-panels>
    </div>
  </q-page>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { Getter } from 'vuex-class';
import User from 'src/models/User';
import AboutPanel from './profile/AboutPanel.vue';
import ExperiencePanel from './profile/ExperiencePanel.vue';
import ContactPanel from './profile/ContactPanel.vue';
import GalleryPanel from './profile/GalleryPanel.vue';

@Component({
  components: {
    AboutPanel,
    ExperiencePanel,
    ContactPanel,
    GalleryPanel,
  },
})
export default class Profile extends Vue {
  @Getter('currentUser') currentUser!: User;
  private selectedProfileTab = 'about';
  private selectedGalleryTab = 'portfolio';
  private currentStatus = {
    name: 'Online',
    icon: 'mdi-checkbox-blank-circle',
    color: 'green',
  };

  private userStatus = [
    {
      name: 'Custom Status',
      icon: 'mdi-emoticon-happy',
      color: 'yellow',
    },
    {
      name: 'Invisible',
      icon: 'mdi-checkbox-blank-circle-outline',
      color: 'info',
    },
    {
      name: 'Do not Disturb',
      icon: 'mdi-minus-circle',
      color: 'red',
    },
    {
      name: 'Away',
      icon: 'mdi-clock-time-three-outline',
      color: 'orange',
    },
    {
      name: 'Online',
      icon: 'mdi-checkbox-blank-circle',
      color: 'green',
    },
  ];

  changeUserStatus(status: any) {
    this.currentStatus = status;
  }
}
</script>
<style lang="stylus" scoped>
.banner {
  width: 100%;
  height: 100px;
  background-size: cover;

  .username {
    font-size: 26px;
    font-weight: bold;
    line-height: 24px;
    text-align: left;
    text-shadow: 0px 2px 5px #000;
  }
}
</style>
